<script setup lang="ts">
</script>

<template>
  <label class="uploadFile" for="uploadFile">
    <span style="align-self: flex-start; margin-top: 10px"
      >&nbsp;&nbsp;上传资料：</span
    >
    <div class="inptDiv">
      <div class="upload">
        <span class="add">&#xe622;</span>
        <span>选择图片</span>
        <input
          class="ipt"
          type="file"
          name="uploadFile"
          multiple
          accept="image/jpeg,image/png"
          maxlength="3"
        />
      </div>
      <p class="tips">最多支持上传3张图片，且不超过 5MB</p>
    </div>
  </label>
</template>

<style scoped lang="scss">
.uploadFile {
  height: 130px;
  display: flex;
  align-items: center;
  color: #333333;
  position: relative;
}
.inptDiv {
  width: 480px;
  display: flex;
  flex-direction: column;
  gap: 8px 0;
}

.upload {
  width: 104px;
  height: 104px;
  background-color: #f5f7fa;
  border-radius: 2px;
  border: 1px solid #e4e7ed;
  overflow: hidden;
  cursor: pointer;
  flex-direction: column;
  @include flexCenterCenter;
  gap: 10px 0px;
  position: relative;

  > span {
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    color: #909399;
  }
  > .add {
    font-size: 25px;
  }
  > .ipt {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    border: transparent;
    color: transparent;
    outline: none;
    background-color: transparent;
    opacity: 0;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

.tips {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #b0b4bd;
}
</style>
